<template>
  <!-- <HeaderBar /> -->
  <div class="banner"></div>
  <div class="full">
    <!-- 版心 -->
    <div class="container">
      <!-- 搜索栏-开始 -->
      <div class="history-wrap">
        <div class="historyTop">
          <div class="historyTop-left">
            <span class="iconfont icon-naozhong naozhong"></span>
            <a>历史记录</a>
          </div>
          <div class="historyTop-right">
            <div class="searchWrap">
              <span class="iconfont icon-sousuo sousuo"></span>
              <input type="text" class="searchInput" placeholder="搜索历史记录" />
            </div>
            <div class="search-right btn">
              <a class="btn" href="">暂停历史记录</a>
              <a class="btn btnclear" href="">清空历史记录</a>
            </div>
          </div>
        </div>
      </div>
      <!-- 搜索栏-结束 -->
      <!-- 历史记录--开始 -->
      <div class="hisContent">
        <div class="hisContent-item" v-for="item in history.list" :key="item.kid">
          <!-- 时间线-开始 -->
          <div class="timeWrap">
            <div class="timeLeft">
              <div class="todayWrap">
                <!--                 <div class="todayIcon">
                  <div class="juxing">今天</div>
                  <div class="sanjiao"></div>
                </div> -->
              </div>
            </div>
            <div class="timeRight">
              <div class="timewrap">
                <div class="zunTime">{{ moment(item.view_at * 1000).format('YYYY-MM-DD') }}</div>
                <div class="xsanjiao"></div>
              </div>
            </div>
          </div>
          <!-- 时间线-结束 -->
          <!-- <div></div> -->
          <div class="hisImg">
            <a
              href="javascript:;"
              @click="routerToVideo(item.history.oid, item.history.bvid, item.history.cid)"
            >
              <img :src="item.cover" />
            </a>
            <div class="jinduWrap" v-if="item.progress !== -1">
              <div class="jindu" :style="`width: ${(item.progress / item.duration) * 100}%;`"></div>
            </div>
          </div>
          <div class="stateBar">
            <a href="" class="title">{{ item.title }}</a>
            <p></p>
            <div class="timeInfo">
              <div class="time-wrap">
                <i class="iconfont icon-shouji-copy phoneIcon"></i>
                <span v-if="item.progress === -1">已看完</span>
                <span v-else>看到 {{ moment(item.progress * 1000).format('mm:ss') }}</span>
              </div>
              <span>
                <a href="javascript:;">
                  <div>
                    <img :src="item.author_face" class="headImg" />
                  </div>
                  <span class="shejiao">{{ item.author_name }}</span>
                </a>
                <span class="type">{{ item.tag_name }}</span>
              </span>
            </div>
            <i class="iconfont icon-shanchu delect"></i>
          </div>
        </div>
      </div>
      <!-- 历史记录--开始 -->
      <!-- 尾部-开始 -->
      <!--       <div class="footer">
        <div class="footTop">
          <div class="item">
            <div class="bili">bilibili</div>
            <div class="about">
              <ul>
                <li><a href="">关于我们</a></li>
                <li><a href="">关于我们</a></li>
                <li><a href="">关于我们</a></li>
              </ul>
              <ul>
                <li><a href="">关于我们</a></li>
                <li><a href="">关于我们</a></li>
                <li><a href="">关于我们</a></li>
              </ul>
            </div>
          </div>

          <div class="itemCenter">
            <div class="bili">bilibili</div>
            <div class="about">
              <ul>
                <li><a href="">关于我们</a></li>
                <li><a href="">关于我们</a></li>
                <li><a href="">关于我们</a></li>
              </ul>
              <ul>
                <li><a href="">关于我们</a></li>
                <li><a href="">关于我们</a></li>
                <li><a href="">关于我们</a></li>
              </ul>
              <ul>
                <li><a href="">关于我们</a></li>
                <li><a href="">关于我们</a></li>
                <li><a href="">关于我们</a></li>
              </ul>
            </div>
          </div>
          <div class="itemLast">
            <div class="IconWrap">
              <div class="lIcon">
                <div>
                  <img src="./images/客户端.png" alt="" />
                </div>
                <div><a href="">客户端下载</a></div>
              </div>
              <div class="lIcon">
                <div>
                  <img src="./images/客户端.png" alt="" />
                </div>
                <div><a href="">客户端下载</a></div>
              </div>
              <div class="lIcon">
                <div>
                  <img src="./images/客户端.png" alt="" />
                </div>
                <div><a href="">客户端下载</a></div>
              </div>
            </div>
          </div>
        </div>
        <div class="footDown">
          <div class="linkLeft">
            <div class="topImg">
              <img src="./images/fs.png" alt="" />
            </div>
            <div class="centreImg">
              <img src="./images/fz.png" alt="" />
            </div>
            <div class="downImg">
              <img src="./images/fx.png" alt="" />
            </div>
          </div>
          <div class="linkRight">
            <div class="topTExt">
              <div>
                <span>
                  广播电视节目制作经营许可证：（沪）字第1248号 |
                  网络文化经营许可证：沪网文[2016]2296-134号 | 信息网络传播视听节目许可证：0910417 |
                  互联网ICP备案：
                </span>
                <a href="">沪ICP备13002172号-3</a>
              </div>

              <div>
                <span>
                  沪ICP备13002172号-3 沪ICP证：沪B2-20100043 |
                  违法不良信息举报邮箱：help@bilibili.com | 违法不良信息举报电话：4000233233转3
                  |</span
                ><a href=""> 营业执照</a>
              </div>

              <div>
                <a href=""> 上海互联网举报中心</a> <a href=""> 上海互联网举报中心</a
                ><a href=""> 上海互联网举报中心</a><a href=""> 上海互联网举报中心</a>
              </div>
              <div>
                <a href="">网上有害信息举报专区： 中国互联网违法和不良信息举报中心</a>
              </div>
              <div>
                <span>
                  亲爱的市民朋友，上海警方反诈劝阻电话“962110”系专门针对避免您财产被骗受损而设，请您一旦收到来电，立即接听
                </span>
              </div>
              <div>
                <span>
                  公司名称：上海宽娱数码科技有限公司 | 公司地址：上海市杨浦区政立路485号 |
                  电话：021-25099888
                </span>
              </div>
            </div>
          </div>
        </div>
      </div> -->

      <!-- 尾部结束 -->
    </div>
  </div>

  <router-view />
</template>

<script lang="ts">
  import { defineComponent, onMounted, reactive, ref, onUnmounted } from 'vue'
  import { useRouter } from 'vue-router'
  import { throttle } from '@/utils/lib'
  import { reqHistory } from '@/api/history'
  import type { HistoryModel } from '@/api/history'
  export default defineComponent({
    name: 'History',
  })
</script>

<script lang="ts" setup>
  // import { ElTimelineItem, ElTimeline } from "element-plus";
  // import HeaderBar from '@/components/HeaderBar/index.vue'
  import moment from 'moment'

  const isSending = ref(false)
  const history = reactive<Partial<HistoryModel>>({})

  async function getHistory(max: number, view_at: number) {
    isSending.value = true
    const { list, cursor } = await reqHistory(max, view_at)
    history.cursor = cursor
    !history.list ? (history.list = list) : history.list.push(...list)
    isSending.value = false
  }

  onMounted(async () => {
    getHistory(0, 0)
  })

  //创建一个节流函数，用于请求下一页历史记录
  const th_offsetDown = throttle(
    () => {
      if (isSending.value) return
      const html = document.documentElement
      const offsetDown = html.scrollHeight - html.scrollTop - html.clientHeight
      if (offsetDown < 300) {
        getHistory(history.cursor!.max, history.cursor!.view_at)
        // console.log(1111)
      }
    },
    400,
    true,
  )

  window.addEventListener('scroll', th_offsetDown)

  onUnmounted(() => {
    window.removeEventListener('scroll', th_offsetDown)
  })

  const router = useRouter()
  const routerToVideo = (aid: number, bvid: string, cid: number) => {
    router.push({ name: 'Video', query: { aid, bvid, cid } })
  }
</script>

<style scoped>
  @import url('//at.alicdn.com/t/font_2975842_ytjefvhq1h8.css');
</style>
<style lang="less" scoped>
  .full {
    width: 100%;
    min-width: 1200px;
  }

  .container {
    width: 1200px;
    margin: 0 auto;
  }

  .banner {
    font-size: 0;
    height: 155px;
    width: 100%;
    min-width: 1200px;
    background-image: url('./images/banner.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
  }

  a:hover {
    color: #00a1d6;
  }
  span:hover {
    color: red;
  }
  .history-wrap {
    padding: 30px 0 0;
    width: 1160px;
    // border: 1px solid red;
    font-size: 12px;
  }
  .historyTop {
    display: flex;
    justify-content: space-between;
  }
  .historyTop-right {
    display: flex;
    justify-content: center;
  }
  .search {
    padding: 0 5px;
  }
  .history-wrap a.btn {
    // outline: 0;
    color: #00a1d6;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid;
    display: inline-block;
    text-align: center;
    padding: 5px 8px;
    border-radius: 5px;
    margin-right: 20px;
    height: 18px;
    line-height: 18px;
  }

  .history-wrap a.btnclear {
    margin-right: 0;
  }
  .searchWrap .searchInp {
    margin-right: 24px;
  }
  .historyTop-left,
  .historyTop-right {
    height: 30px;
    line-height: 30px;
  }

  .historyTop-left {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .naozhong {
    margin: auto 10px;
    font-size: 28px;
    // font-weight: 400;
  }
  .historyTop-left a {
    vertical-align: middle;
    display: inline-block;
    font-size: 18px;
    line-height: 24px;
    color: #222;
    text-decoration: none;
  }
  .searchWrap {
    position: relative;
    margin-right: 24px;
    box-sizing: border-box;
    // display: -webkit-box;
    // display: -ms-flexbox;
    display: flex;
    // position: absolute;
    padding: 0 5px;
    width: 188px;
    height: 30px;
    align-items: center;
    // line-height: 30px;
    border: 1px solid #ccd0d7;
    // right: 212px;
    // top: 50%;
    // -webkit-transform: translateY(-50%);
    // transform: translateY(-50%);
    border-radius: 15px;
    // -webkit-box-align: center;
    // -ms-flex-align: center;
    // align-items: center;
    // -webkit-box-pack: justify;
    // -ms-flex-pack: justify;
    justify-content: space-between;
  }
  .searchWrap .searchInput {
    width: 120px;
    height: 17px;
    line-height: 17px;
    // border: 1px solid red;
    border: none;
    outline: none;
    font-size: 12px;
    margin: 0 auto;
  }
  .sousuo {
    float: left;
    position: absolute;
    left: 10px;
    color: #ccd0d7;
  }
  //  历史记录--开始
  .hisContent {
    width: 1162px;
    // height: 123px;
    margin: 17px auto 0;
    // border: 1px solid red;
  }
  .hisContent-item {
    border: 1px solid transparent;
    width: 1160px;
    height: 101px;
    display: flex;
    // position: relative;
    padding: 10px 0;
    align-items: center;
    margin: 0 auto;
    // margin-left: 80px;
    // position: relative;
    // bottom: 72px;
  }
  // 时间线-开始
  .timeWrap {
    width: 164px;
    height: 123px;
    display: flex;
    position: relative;
    top: 11px;

    .timeLeft {
      position: relative;
      width: 60px;
      height: 123px;
      border-right: 1px solid #e5e9ef;
      .todayWrap {
        position: absolute;
        margin-left: 12px;
        .todayIcon {
          .juxing {
            width: 28px;
            height: 34px;
            padding: 0 9px;
            background-color: #ff74a5;
            border-radius: 5px;
            line-height: 34px;
            font-size: 14px;
            color: #ffffff;
          }
          .sanjiao {
            width: 0;
            height: 0;
            border: 6px solid #ff74a5;
            // border:6px solid black;
            border-top: 6px solid transparent;
            border-right: 6px solid transparent;
            border-bottom: 6px solid transparent;
            position: absolute;
            left: 46px;
            top: 11px;
          }
        }
      }
    }
    .timeRight {
      width: 100px;
      height: 123px;
      position: relative;
      .timewrap {
        width: 100px;
        height: 17px;
        position: absolute;
        top: 50px;
        left: 5px;
        .zunTime {
          margin-left: 20px;
          font-size: 12px;
          color: #888;
        }
        .xsanjiao {
          width: 0;
          height: 0;
          border: 6px solid #e5e9ef;
          // border:6px solid black;
          border-top: 3px solid transparent;
          border-right: 3px solid transparent;
          border-bottom: 3px solid transparent;
          position: absolute;
          top: 6px;
          left: -5px;
        }
      }
    }
  }

  // 时间线-结束
  .hisImg {
    // position: absolute;
    // left: 200px;
    width: 160px;
    height: 100px;
    // margin-left:197px;
    margin: 30px;
    position: relative;
  }
  .hisImg a {
    display: inline-block;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    overflow: hidden;
  }
  .hisImg img {
    width: 100%;
    height: 100%;
  }
  .hisImg .jinduWrap {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 6px;
    width: 160px;
    background-color: #00000055;
  }

  .hisImg .jindu {
    height: 6px;
    background-color: pink;
    // border-bottom-left-radius: 4px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 4px;
  }

  .stateBar {
    // position: absolute;
    // left: 390px;
    // border: 1px solid black;
    width: 765px;
    height: 101px;
    border-bottom: 1px solid #e5e9ef;
    position: relative;

    // padding-top: 5.5px;
    // maigin: 5.5px 0;
  }
  .title {
    width: 580px;
    height: 19px;
    margin-bottom: 10px;
    cursor: pointer;
    padding-top: 5.5px;
    display: block;
    font-size: 14px;
    // margin-bottom: 10px;
    color: #222;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .stateBar p {
    width: 762px;
    height: 16px;
    margin-bottom: 18px;
  }
  .stateBar .timeInfo {
    height: 20px;
    line-height: 20px;
    // border: 1px solid pink;
  }

  .time-wrap {
    width: 300px;
    height: 20px;
    line-height: 20px;
    float: left;
  }
  .time-wrap span {
    color: #99a2aa;
    font-size: 12px;
    float: left;
    margin-left: 6px;
  }
  .phoneIcon {
    float: left;
    color: #99a2aa;
  }
  .headImg {
    float: left;
    border-radius: 50%;
    width: 20px;
    height: 20px;
  }
  .shejiao {
    float: left;
    color: #99a2aa;
    font-size: 12px;
    margin: 0 10px;
  }
  .time-wrap span {
    line-height: 20px;
  }
  .type {
    float: left;
    color: #99a2aa;
    font-size: 12px;
    padding-left: 10px;
    border-left: 1px solid #e5e9ef;
  }

  .delect {
    vertical-align: top;
    margin-top: 7px;
    color: #99a2aa;
    position: absolute;
    padding-left: 16px;
    right: 0;
    top: 29px;
    cursor: pointer;
  }

  //  历史记录--结束
  // 尾部-开始
  .footer {
    width: 100%;
    height: 367px;
    box-sizing: border-box;
    background-color: #f6f9fa;
    padding-top: 40px;
    .footTop {
      width: 1160px;
      height: 112px;
      margin: 0 auto 20px;
      display: flex;
      .item,
      .itemCenter {
        width: 360px;
        // height:100%;

        .bili {
          font-size: 14px;
          text-decoration: none;
          cursor: pointer;
          color: #99a2aa;
          margin-bottom: 16px;
          line-height: 14px;
        }
        .about {
          display: flex;
          ul {
            width: 120px;
            // border: 1px solid red;
            li {
              list-style: none;
              margin-bottom: 20px;
              line-height: 14px;
              a {
                font-size: 14px;
              }
            }
          }
        }
      }
      .itemCenter {
        width: 360px;
        // margin:0 40px;
        padding: 0 40px;
        border-left: 1px solid #e5e9ef;
        border-right: 1px solid #e5e9ef;
      }
      .itemLast {
        width: 320px;
        height: 112px;
        .IconWrap {
          margin-left: 50px;

          .lIcon {
            // display: inline-block;
            float: left;
            width: 82px;
            height: 80px;
            display: flex;
            flex-direction: column;
            align-items: center;

            // align-items:center;
            // justify-content: center;
          }
        }
      }
    }
    .footDown {
      // height: 200px;
      width: 1160px;
      margin: 0 auto;
      display: flex;
      .linkLeft {
        .topImg {
          width: 100px;
          height: 80px;
        }
        .centreImg {
          width: 100px;
          height: 40px;
        }
        .downImg {
          width: 100px;
          height: 38px;
        }
      }
      .linkRight {
        // position:relative;
        // left:20px;
        margin-left: 20px;
        .topTExt {
          height: 159px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          a:hover {
            color: #222;
          }
          span,
          a {
            color: #99a2aa;
            text-align: center;
            font-size: 12px;
          }
        }
      }
    }
  }
  .topImg,
  .centreImg,
  .downImg {
    img {
      width: 100%;
      height: 100%;
    }
  }

  // 尾部-结束
</style>
